<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
<style type="text/css">
	table label{
		font-weight: bold;
		/*padding-right: 20px;*/
	}
	table span{
		margin-right:50px;
	}
	.pop{
		position: absolute;
		width: 300px;
		padding: 8px;
		background: #eee;
		box-shadow: 5px 5px 5px #888888;
		display: none;
	}
	.pop ul{
		list-style: none;
		overflow: hidden;
		padding: 0px;
	}
	.pop ul li{
		float: left;
		padding: 5px;
	}
	.pop ul li:hover{
		cursor: pointer;
		color: #00aaff
	}

	.table > tbody > tr > td{
		border-top:0px;
	}
	.table > tbody + tbody {
    	border-top: 1px solid #ddd;
	}
	.orange{
		color: orange;
		font-weight: bold;
	}
	.red{
		color: red;
		font-weight: bold;
	}
</style>
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>订单管理</li>
			    <li>明细</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						<vue-select 
							placeholder="类别"
							v-model="search.cate_name"
							url="{%:url('Goods/getCateListBySort')%}"
							:sorts ="['衣服','下装','鞋','箱包','饰品']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="品牌"
							v-model="search.brand_name"
							url="{%:url('Brand/getListBySort')%}"
							:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<select class="form-control" v-model="search.progress">
							<option value=""> -状态- </option>
							<option value="1"> 新订单 </option>
							<option value="2"> 已报单 </option>
							<option value="3"> 已到货 </option>
							<option value="4"> 已发货 </option>
							<option value="5"> 退货 </option>
							<option value="6"> 换货 </option>
							<option value="0"> 已取消 </option>
						</select>
						<vue-select 
							placeholder="销售"
							v-model="search.acct_name"
							url="{%:url('Account/getSalers')%}"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<input type="text" class="form-control" placeholder="客户" size="6" v-model="search.cust">
						<input type="text" class="form-control" placeholder="订单号" size="6" v-model="search.order_no">
					    <button type="button" class="btn btn-primary search" @click="getList()">查询</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-hover table-condensed">
						<thead>
							<tr>
								<th>订单号</th>
								<th>客户</th>
								<th>地址</th>
								<th>销售</th>
								<th>时间</th>
								<th>序号</th>
								<th>商品</th>
								<th>名称</th>
								<th>数量与尺码</th>
								<th>颜色</th>
								<th>单价</th>

								<th>备注</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody v-for="row in rows">
							<tr v-for="item,i in row.items">
								<td v-if="i==0">{{ item.order_no }}</td>
								<td v-if="i==0">{{ item.cust }}</td>
								<td v-if="i==0" style="width: 320px;">{{ item.detail_addr }}</td>
								<td v-if="i==0">{{ item.acct_name }}</td>
								<td v-if="i==0">{{ item.add_day }}
									<span style="font-size: 12px;color: #aaa">{{ item.add_time }}</span>
								</td>
								<td v-if="i>0" colspan="5"></td>
								<td>{{ item.order_sn }}</td>
								<td>
									<a :href="item.pic" target="_BLANK">
										<img :src="item.pic" height="38" class="pre_view">
									</a>
								</td>
								<td>{{ item.name }}</td>
								<td>{{ item.qty }} * {{ item.spec }}</td>
								<td>{{ item.color }}</td>
								<td>{{ item.price }}</td>
								<td>{{ item.remarks }}</td>
								<td>
									<span class="label" :class="progress_class[item.progress]">
									{{ item.progress_desc }}</span>
								</td>
								<td><a href="javascript:;" @click="toItemDetail(item)">详情</a></td>
							</tr>
						</tbody>
					</table>
					<div>
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
		<vue-modal :visible.sync="showModal" title="详情">
			<div class="form-horizontal" style="width: 90%;">

				<div class="form-group">
				    <label class="col-md-3 control-label">报单记录</label>
				    <div class="col-md-6">
				    	<table class="table">
				    		<tr style="color:#aaa">
				    			<th>报单日期</th>
				    			<th>档口</th>
				    			<th>单价</th>
				    			<th>备注</th>
				    			<th>状态</th>
				    		</tr>
				    		<tr v-for="row in info.purchase_rows">
				    			<td>{{ row.add_day }}</td>
				    			<td>{{ row.stall_info.name }}</td>
				    			<td>{{ row.price }}</td>
				    			<td>{{ row.remarks }}</td>
				    			<td>{{ row.status_txt }}</td>
				    		</tr>
				    		<tr>
				    			<td colspan="5" v-if="info.purchase_rows.length==0" style="color:red">
				    				无报单记录
				    			</td>
				    		</tr>
				    	</table>
				    </div>  
				</div>
				<div class="form-group">
				    <label class="col-md-3 control-label">发货记录</label>
				    <div class="col-md-6">
				    	<table class="table">
				    		<tr style="color:#aaa">
				    			<th>日期</th>
				    			<th>快递公司</th>
				    			<th>物流单号</th>
				    			<th>数量</th>
				    			<th>备注</th>
				    		</tr>
				    		<tr v-for="row in info.exp_rows">
				    			<td>{{ row.add_day }}</td>
				    			<td>{{ row.express_info.name }}</td>
				    			<td>{{ row.express_info.express_no }}</td>
				    			<td>{{ row.qty }}</td>
				    			<td>{{ row.remarks }}</td>
				    		</tr>
				    		<tr>
				    			<td colspan="4" v-if="info.exp_rows.length==0" style="color:red">
				    				无发货记录
				    			</td>
				    		</tr>
				    	</table>
				    </div>  
				</div>
				<div class="form-group">
					<div class="col-md-6 col-md-offset-3">
						<button class="btn btn-danger"
							@click="setStatus(10)"
							v-if="info.progress==3">重新报单
						</button>
					</div>
				</div>
			</div>
		</vue-modal>
	</div>
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script type="text/javascript">
		
		var vm = new Vue({
			el: '#app',
			data: {
				search:{
					cate_name: '',
					brand_name: '',
					acct_name: '',
					progress: '',
					cust: ''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				progress_class: ['label-danger','label-primary','label-info','label-warning','label-success','red','orange','','','','label-danger'],
				showModal: false,
				info: {
					purchase_rows: [],
					exp_rows: []
				}
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
				'vue-modal': vueModal
			},
			created: function(){
				this.getList();
				//console.log(this.rows);
			},
			methods:{
				getList: function(page=1){
					var data = {};
					data = this.search;
					
					var _this = this;
					$.ajax({
			            url: "{%:url('Orders/getItemList')%}?page="+page,
			            type:'POST',
			            dataType: 'json',
			            data: data,
			            success:function(rsp){
			                _this.rows = rsp.data.rows;
			                _this.total_page = rsp.data.total_page;
							_this.cur_page = Number(rsp.data.page);
			            }
			        });
				},
				toItemDetail: function(item){
					this.showModal = true;
					var data = {
						id: item.id
					};
					var _this = this;
					$.post("{%:url('Orders/getItemInfo')%}",data,function(rsp){
						_this.info = rsp.data.info;
						_this.info.id = item.id;
						_this.info.progress = item.progress;
					},'json')
				},
				setStatus: function(code){
					var _this = this;
					$.post("{%:url('Orders/setStatus')%}",{
						id: this.info.id,
						progress: code
					},function(rsp){
						alert(rsp.msg);
						if (rsp.code) {
							_this.showModal = false;
							_this.getList();
						}
					},'json')
				}
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','img.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('src')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','img.pre_view',function(){
			layer.close(tip_index);
		})	
		
	</script>
</body>

</html>